<div class="textfield field row"
	 ng-click="setActiveField(field._id, index, true)">
	<div class="col-xs-12 field-title row-fluid" ng-style="{'color': design.colors.questionColor}">
    	<h3 class="col-xs-12">
    		<small class="field-number">
				{{index+1}}
				<i class="fa fa-angle-double-right" aria-hidden="true"></i>
			</small>

			{{field.title}}

    		<span class="required-error" ng-show="!field.required">
    			({{ 'OPTIONAL' | translate }})
    		</span>
    	</h3>

		<p class="col-xs-12">
			<small>{{field.description}}</small>
		</p>
    </div>
    <div class="col-xs-12 field-input">
		<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
			name="{{field.fieldType}}{{index}}"
            type="{{input_type}}"
		   	ng-pattern="validateRegex"
			placeholder="{{placeholder}}"
			ng-class="{ 'no-border': !!field.fieldValue }"
            class="focusOn text-field-input"
            ng-focus="setActiveField(field._id, null, false)"
			ng-model="field.fieldValue"
			ng-model-options="{ debounce: 250 }"
			value="field.fieldValue"
		   	on-enter-or-tab-key="nextField()"
		   	on-tab-and-shift-key="prevField()"
			ng-required="field.required"
	        aria-describedby="inputError2Status" />
    </div>
    <div class="col-xs-12">
        <div ng-show="forms.myForm.{{field.fieldType}}{{index}}.$invalid && !!forms.myForm.{{field.fieldType}}{{index}}.$viewValue " class="alert alert-danger" role="alert">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only">{{ 'ERROR' | translate }}:</span>
			<span ng-if="field.fieldType == 'email'"> {{ 'ERROR_EMAIL_INVALID' | translate }} </span>
			<span ng-if="field.fieldType == 'number'"> {{ 'ERROR_NOT_A_NUMBER' | translate }} </span>
			<span ng-if="field.fieldType == 'link'"> {{ 'ERROR_URL_INVALID' | translate }} </span>
        </div>
    </div>
</div>
<div>
	<div class="btn btn-lg btn-default" ng-disabled="!field.fieldValue || field.$invalid"
	 	style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)">
			<button ng-disabled="!field.fieldValue || field.$invalid"
				ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
                ng-click="nextField()"
				class="btn col-sm-5 col-xs-5">

				{{ 'OK' | translate }} <i class="fa fa-check"></i>
			</button>
			<div class="col-xs-6 col-sm-3" style="margin-top:0.2em">
				<small style="color:#ddd; font-size:70%">
				{{ 'ENTER' | translate }}
				</small>
			</div>
	</div>
</div>
